<template>
  <div class="pageS">
    <div class="title">
      <search-form @sub="search" ref="search"></search-form>
    </div>
    <div>
      <ul v-infinite-scroll="load" style="overflow:auto" infinite-scroll-delay='1000'>
        <card-items :par="par" v-for="item,index in dataList" :data="item" :key="index"></card-items>
      </ul>
    </div>
  </div>
</template>

<script>
import searchForm from "@/views/searchPage/components/searchForm";
import cardItems from "@/views/searchPage/components/cardItems";
export default {
  name: "searchPage",
  components:{
    searchForm,cardItems
  },
  mounted() {
    this.getInfo()
  },
  data(){
    return{
      dataList:[],
      par:'',
      page:0,
      total:0
    }
  },
  methods:{
    /*getSearch(){
      console.log(11111)
      console.log(this.$refs.search)
      this.$api.searchHome({
        data:this.$refs.search.searchPar,
        page:0,
        pageSize:999
      }).then(res=>{
        this.dataList=res.data.data
      }).catch()
    },*/
    load(){
      this.page++
      this.getInfo()
    },
    search(){
      this.page=0
      this.dataList=[]
      this.getInfo()
    },
    getInfo(){
      if(this.page*10>this.total&&this.total>0){
        return
      }
      this.$api.searchHome({
        data:this.$refs.search.searchPar,
        page:this.page,
        pageSize:10
      }).then(res=>{
        this.total=res.data.recordsTotal
        this.par=this.$refs.search.searchPar
        res.data.data.forEach(item=>{
          this.dataList.push(item)
        })
      }).catch()
    }
  }
}
</script>

<style scoped lang="less">
.pageS{
  display: flex;
  flex-direction: column;
  align-content: space-around;
  flex-wrap: wrap;
  .title{
    display:flex;
    justify-content: space-between;
    flex-direction: column;
    align-content: space-around;
    flex-wrap: wrap;
    margin-top: 30px;
  }
}
</style>
